<template>
  <div class="home-index">
    <div style="width: calc(100vw); height: calc(100vh); background: url(../../../static/pc_bg.png) no-repeat; background-size: 100% 100%; overflow: auto; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; position: relative;" class="invisible-scrollbar">
      <!-- 标题开始 -->
      <div ref="matchTitleElement" style="width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative;" :style="{ paddingTop: (30 / 96) + 'rem', paddingBottom: (29 / 96) + 'rem' }">
        <div :style="{width: '7%', height: '100%', position: 'absolute', top: '0rem', left: '0rem', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center'}" @mouseleave="leaveClick" @mouseenter="enterClick">
          <div v-if="backsShows" :style="{width: '100%', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', cursor: 'pointer'}" @click="goBackClick">
            <img :style="{width: (50 / 96) + 'rem', height: (50 / 96) + 'rem'}" src="../../../static/match-backs.png" />
          </div>
        </div>
        <div class="match-title-main" :style="{ height: '100%' }">
          <span class="match-title" :style="{ fontSize: (60 / 96) + 'rem', /*lineHeight: (30 / 96) + 'rem'*/ }">{{ matchTitle }}</span>
        </div>
      </div>
      <!-- 标题结束 -->
      <!-- 队伍开始 -->
      <div style="width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center;" ref="teamElement">
        <div :style="{ width: '47.39%' }" style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center;">
          <div :style="{ width: '58%', height: (108 / 96) + 'rem', borderTop: (2 / 96) + 'rem solid', borderBottom: (2 / 96) + 'rem solid' }" style="border-image: -webkit-linear-gradient(-88deg, #000000, #FFFFFF, #000000) 10 10; border-image: -moz-linear-gradient(-88deg, #000000, #FFFFFF, #000000) 10 10; border-image: linear-gradient(-88deg, #000000, #FFFFFF, #000000) 10 10; display: flex; flex-direction: row; justify-content: center; align-items: center;">
            <span :style="{ fontSize: (50 / 96) + 'rem', lineHeight: (50 / 96) + 'rem', textOverflow: '-o-ellipsis-lastline', overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', '-webkitLineClamp': 2, 'lineClamp': 2, '-webkitBoxOrient': 'vertical' }" style="font-family: SimSun; font-weight: 400; color: #FFFFFF;">{{ homeTeamName }}</span>
          </div>
          <div :style="{ width: (157 / 96) + 'rem', height: (157 / 96) + 'rem' }">
            <img :style="{ width: '100%', height: '100%', borderRadius: '100%' }" :src="homeTeamImg" />
          </div>
          <div :style="{ width: (200 / 96) + 'rem' }" style="display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer;" @click="toMatchInfosClick">
            <span :style="{ fontSize: (106 / 96) + 'rem' }" style="font-family: Microsoft YaHei; font-weight: bold; color: #FFFFFF;">{{ homeTeamScorce }}</span>
          </div>
        </div>
        <div :style="{ width: '5.2%' }" style="display: flex; flex-direction: column; justify-content: flex-start; align-items: center;">
          <!--<div :style="{ height: (29 / 96) + 'rem', marginTop: -(16 / 96) + 'rem' }" style="width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center;">
            <img style="width: 100%; height: 100%;" src="../../../static/pc_jt.png" />
          </div>-->
          <span :style="{ fontSize: (50 / 96) + 'rem' }" style="font-family: Adobe Heiti Std; font-weight: normal; color: #EEEEEE;">vs</span>
        </div>
        <div :style="{ width: '47.39%' }" style="display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
          <div :style="{ width: (200 / 96) + 'rem' }" style="display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer;" @click="toMatchInfosClick">
            <span :style="{ fontSize: (106 / 96) + 'rem' }" style="font-family: Microsoft YaHei; font-weight: bold; color: #FFFFFF;">{{ awayTeamScorce }}</span>
          </div>
          <div :style="{ width: (157 / 96) + 'rem', height: (157 / 96) + 'rem' }">
            <img :style="{ width: '100%', height: '100%', borderRadius: '100%' }" :src="awayTeamImg" />
          </div>
          <div :style="{ width: '58%', height: (108 / 96) + 'rem', borderTop: (2 / 96) + 'rem solid', borderBottom: (2 / 96) + 'rem solid' }" style="border-image: -webkit-linear-gradient(-88deg, #000000, #FFFFFF, #000000) 10 10; border-image: -moz-linear-gradient(-88deg, #000000, #FFFFFF, #000000) 10 10; border-image: linear-gradient(-88deg, #000000, #FFFFFF, #000000) 10 10; display: flex; flex-direction: row; justify-content: center; align-items: center;">
            <span :style="{ fontSize: (50 / 96) + 'rem', lineHeight: (50 / 96) + 'rem', textOverflow: '-o-ellipsis-lastline', overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', '-webkitLineClamp': 2, 'lineClamp': 2, '-webkitBoxOrient': 'vertical' }" style="font-family: SimSun; font-weight: 400; color: #FFFFFF;">{{ awayTeamName }}</span>
          </div>
        </div>
      </div>
      <!-- 队伍结束 -->
      <!-- 主体开始 -->
      <div :style="{ width: '100%', height: mainHeight + 'px' }" style="display: flex; flex-direction: row; justify-content: center; align-items: flex-start;" ref="mainElement">
        <div :style="{ width: '32.3%', height: mainHeight + 'px' }" style="display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; overflow: hidden;" class="invisible-scrollbar">
          <div :style="{ height: (54 / 96) + 'rem', marginTop: (19 / 96) + 'rem', marginBottom: (19 / 96) + 'rem' }" style="width: 88.4%; display: flex; flex-direction: row; justify-content: flaex-start; align-items: center;" ref="titleElement">
            <div :style="{ width: (77 / 96) + 'rem' }" style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
              <span :style="{ fontSize: (30 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }" style="font-family: SimHei; font-weight: 400; color: #ababab;">号码</span>
            </div>
            <div :style="{ width: '57.9%' }" style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
              <span :style="{ fontSize: (30 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }" style="font-family: SimHei; font-weight: 400; color: #ababab;">姓名</span>
            </div>
            <div :style="{ width: (77 / 96) + 'rem' }" style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
              <span :style="{ fontSize: (30 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }" style="font-family: SimHei; font-weight: 400; color: #ababab;">犯规</span>
            </div>
            <div :style="{ width: (77 / 96) + 'rem' }" style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
              <span :style="{ fontSize: (30 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }" style="font-family: SimHei; font-weight: 400; color: #ababab;">得分</span>
            </div>
          </div>
          <div v-if="homeTeamElementHeight > mainHeightItem" style="width: 88.4%;">
            <vue-seamless-scroll :data="homeTeamLists" class="seamless-warp" :class-option="classLeftOption" :style="{ height: mainHeightItem + 'px' }">
              <div ref="homeTeamElement" style="width: 100%;">
                <div v-for="(item, index) in homeTeamLists" :key="index" style="width: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; overflow: auto;" :style="{ height: (54 / 96) + 'rem', borderTopLeftRadius: (54 / 96) + 'rem', borderBottomLeftRadius: (54 / 96) + 'rem', background: index <= 4 ? 'linear-gradient(88deg, #344474 0%, #191B3A 48%, #0B142B 100%)' : '' }">
                  <div style="width: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;" :style="{ height: (50 / 96) + 'rem', borderTopLeftRadius: (50 / 96) + 'rem', borderBottomLeftRadius: (50 / 96) + 'rem', background: index <= 4 ? '#121327' : '' }">
                    <div :style="{ width: (77 / 96) + 'rem' }" style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                      <span :style="{ fontSize: (38 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }" style="font-family: SimHei; font-weight: 400; color: rgba(238, 238, 238, 0.8);">{{ item.playerNum }}</span>
                    </div>
                    <div :style="{ width: '57.9%' }" style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                      <span :style="{ fontSize: (36 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }" style="font-family: SimHei; font-weight: 400; color: rgba(238, 238, 238, 0.8);">{{ item.playerName }}</span>
                    </div>
                    <div :style="{ width: (77 / 96) + 'rem' }" style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                      <span :style="{ fontSize: (38 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }" style="font-family: SimHei; font-weight: 400; color: rgba(238, 238, 238, 0.8);">{{ item.fNum }}</span>
                    </div>
                    <div :style="{ width: (77 / 96) + 'rem' }" style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                      <span :style="{ fontSize: (38 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }" style="font-family: SimHei; font-weight: 400; color: rgba(238, 238, 238, 0.8);">{{ item.pNum }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </vue-seamless-scroll>
          </div>
          <div v-if="homeTeamElementHeight <= mainHeightItem" style="width: 88.4%;">
            <div ref="homeTeamElement" style="width: 100%;">
              <div v-for="(item, index) in homeTeamLists" :key="index" style="width: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; overflow: auto;" :style="{ height: (54 / 96) + 'rem', borderTopLeftRadius: (54 / 96) + 'rem', borderBottomLeftRadius: (54 / 96) + 'rem', background: index <= 4 ? 'linear-gradient(88deg, #344474 0%, #191B3A 48%, #0B142B 100%)' : '' }">
                <div style="width: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;" :style="{ height: (50 / 96) + 'rem', borderTopLeftRadius: (50 / 96) + 'rem', borderBottomLeftRadius: (50 / 96) + 'rem', background: index <= 4 ? '#121327' : '' }">
                  <div :style="{ width: (77 / 96) + 'rem' }" style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                    <span :style="{ fontSize: (38 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }" style="font-family: SimHei; font-weight: 400; color: rgba(238, 238, 238, 0.8);">{{ item.playerNum }}</span>
                  </div>
                  <div :style="{ width: '57.9%' }" style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                    <span :style="{ fontSize: (36 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }" style="font-family: SimHei; font-weight: 400; color: rgba(238, 238, 238, 0.8);">{{ item.playerName }}</span>
                  </div>
                  <div :style="{ width: (77 / 96) + 'rem' }" style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                    <span :style="{ fontSize: (38 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }" style="font-family: SimHei; font-weight: 400; color: rgba(238, 238, 238, 0.8);">{{ item.fNum }}</span>
                  </div>
                  <div :style="{ width: (77 / 96) + 'rem' }" style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                    <span :style="{ fontSize: (38 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }" style="font-family: SimHei; font-weight: 400; color: rgba(238, 238, 238, 0.8);">{{ item.pNum }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div :style="{ width: '28%', height: mainHeight + 'px' }" style="display: flex; flex-direction: column; justify-content: flex-start; align-items: center; overflow: hidden;" class="invisible-scrollbar">
          <!-- 节数开始 -->
          <span :style="{ fontSize: (66 / 96) + 'rem', marginTop: '6%' }" style="font-family: Adobe Heiti Std; font-weight: normal; color: #FFFFFF;">{{ sectionsNum }}</span>
          <!-- 节数结束 -->
          <div v-if="countDown" style="width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
            <!-- 倒计时开始 -->
            <!--<div style="margin-top: 14px; display: flex; flex-direction: row; justify-content: center; align-items: center;">
              <div :style="{ width: (100 / 96) + 'rem' }" style="position: relative;">
                <div :style="{ height: (60 / 96) + 'rem', marginBottom: (2 / 96) + 'rem', borderTopLeftRadius: (5 / 96) + 'rem', borderTopRightRadius: (5 / 96) + 'rem', boxShadow: '0rem ' + (8 / 96) + 'rem ' + (10 / 96) + 'rem 0rem rgba(18, 19, 39, 0.61)' }" style="width: 100%; background: #FFFFFF; opacity: 0.95;"></div>
                <div :style="{ height: (60 / 96) + 'rem', marginTop: (2 / 96) + 'rem', borderBottomLeftRadius: (5 / 96) + 'rem', borderBottomRightRadius: (5 / 96) + 'rem', boxShadow: '0rem ' + (8 / 96) + 'rem ' + (10 / 96) + 'rem 0rem rgba(18, 19, 39, 0.61)' }" style="width: 100%; background: #FFFFFF; opacity: 0.95;"></div>
                <div style="width: 100%; height: 100%; position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; top: 0;">
                  <span :style="{ fontSize: (80 / 96) + 'rem' }" style="font-family: Adobe Heiti Std; font-weight: bold; color: #000000;">{{ minute }}</span>
                </div>
              </div>
              <div :style="{ width: (60 / 96) + 'rem' }" style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
                <span :style="{ fontSize: (40 / 96) + 'rem' }" style="font-family: Adobe Heiti Std; font-weight: bold; color: #FFFFFF;">:</span>
              </div>
              <div :style="{ width: (100 / 96) + 'rem' }" style="position: relative;">
                <div :style="{ height: (60 / 96) + 'rem', marginBottom: (2 / 96) + 'rem', borderTopLeftRadius: (5 / 96) + 'rem', borderTopRightRadius: (5 / 96) + 'rem', boxShadow: '0rem ' + (8 / 96) + 'rem ' + (10 / 96) + 'rem 0rem rgba(18, 19, 39, 0.61)' }" style="width: 100%; background: #FFFFFF; opacity: 0.95;"></div>
                <div :style="{ height: (60 / 96) + 'rem', marginTop: (2 / 96) + 'rem', borderBottomLeftRadius: (5 / 96) + 'rem', borderBottomRightRadius: (5 / 96) + 'rem', boxShadow: '0rem ' + (8 / 96) + 'rem ' + (10 / 96) + 'rem 0rem rgba(18, 19, 39, 0.61)' }" style="width: 100%; background: #FFFFFF; opacity: 0.95;"></div>
                <div style="width: 100%; height: 100%; position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; top: 0;">
                  <span :style="{ fontSize: (80 / 96) + 'rem' }" style="font-family: Adobe Heiti Std; font-weight: bold; color: #000000;">{{ second }}</span>
                </div>
              </div>
              <div :style="{ width: (60 / 96) + 'rem' }" style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
                <span :style="{ fontSize: (40 / 96) + 'rem' }" style="font-family: Adobe Heiti Std; font-weight: bold; color: #FFFFFF;">.</span>
              </div>
              <div :style="{ width: (100 / 96) + 'rem' }" style="position: relative;">
                <div :style="{ height: (60 / 96) + 'rem', marginBottom: (2 / 96) + 'rem', borderTopLeftRadius: (5 / 96) + 'rem', borderTopRightRadius: (5 / 96) + 'rem', boxShadow: '0rem ' + (8 / 96) + 'rem ' + (10 / 96) + 'rem 0rem rgba(18, 19, 39, 0.61)' }" style="width: 100%; background: #FFFFFF; opacity: 0.95;"></div>
                <div :style="{ height: (60 / 96) + 'rem', marginTop: (2 / 96) + 'rem', borderBottomLeftRadius: (5 / 96) + 'rem', borderBottomRightRadius: (5 / 96) + 'rem', boxShadow: '0rem ' + (8 / 96) + 'rem ' + (10 / 96) + 'rem 0rem rgba(18, 19, 39, 0.61)' }" style="width: 100%; background: #FFFFFF; opacity: 0.95;"></div>
                <div style="width: 100%; height: 100%; position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; top: 0;">
                  <span :style="{ fontSize: (80 / 96) + 'rem' }" style="font-family: Adobe Heiti Std; font-weight: bold; color: #000000;">{{ millisecond }}</span>
                </div>
              </div>
            </div>-->
            <!-- 倒计时结束 -->
            <!-- 24秒开始 -->
            <!--<div :style="{ width: (130 / 96) + 'rem', height: (76 / 96) + 'rem', marginTop: (29 / 96) + 'rem', borderRadius: (10 / 96) + 'rem' }" style="background: url(../../../static/kuang.png) no-repeat; background-size: 100% 100%; opacity: 0.95; display: flex; flex-direction: row; justify-content: center; align-items: center;">
              <div :style="{ width: (126 / 96) + 'rem', height: (70 / 96) + 'rem', borderRadius: (10 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }">
                <span :style="{ fontSize: (60 / 96) + 'rem' }" style="font-family: Adobe Heiti Std; font-weight: normal; color: #E49805;">24</span>
              </div>
            </div>-->
          </div>
          <!-- 24秒结束 -->
          <!-- 暂停开始 -->
          <div :style="{ marginTop: (46 / 96) + 'rem' }" style="width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center;">
            <div :style="{ width: (100 / 96) + 'rem' }">
              <div style="width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
                <span :style="{ fontSize: (66 / 96) + 'rem' }" style="font-family: Adobe Heiti Std; font-weight: normal; color: #EEEEEE;">{{ homeTeamSuspendNum }}</span>
              </div>
            </div>
            <div :style="{ width: (60 / 96) + 'rem' }"></div>
            <div :style="{ width: (100 / 96) + 'rem' }">
              <div style="width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
                <span :style="{ fontSize: (46 / 96) + 'rem' }" style="font-family: Adobe Heiti Std; font-weight: normal; color: #07BA18;">暂停</span>
              </div>
            </div>
            <div :style="{ width: (60 / 96) + 'rem' }"></div>
            <div :style="{ width: (100 / 96) + 'rem' }">
              <div style="width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
                <span :style="{ fontSize: (66 / 96) + 'rem' }" style="font-family: Adobe Heiti Std; font-weight: normal; color: #EEEEEE;">{{ awayTeamSuspendNum }}</span>
              </div>
            </div>
          </div>
          <!-- 暂停结束 -->
          <!-- 犯规开始 -->
          <div :style="{ marginTop: (38 / 96) + 'rem' }" style="width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center;">
            <div :style="{ width: (100 / 96) + 'rem' }">
              <div style="width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
                <span :style="{ fontSize: (66 / 96) + 'rem' }" style="font-family: Adobe Heiti Std; font-weight: normal; color: #EEEEEE;">{{ homeTeamfoulNum }}</span>
              </div>
            </div>
            <div :style="{ width: (60 / 96) + 'rem' }"></div>
            <div :style="{ width: (100 / 96) + 'rem' }">
              <div style="width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
                <span :style="{ fontSize: (46 / 96) + 'rem' }" style="font-family: Adobe Heiti Std; font-weight: normal; color: #E50909;">犯规</span>
              </div>
            </div>
            <div :style="{ width: (60 / 96) + 'rem' }"></div>
            <div :style="{ width: (100 / 96) + 'rem' }">
              <div style="width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
                <span :style="{ fontSize: (66 / 96) + 'rem' }" style="font-family: Adobe Heiti Std; font-weight: normal; color: #EEEEEE;">{{ awayTeamfoulNum }}</span>
              </div>
            </div>
          </div>
          <!-- 犯规结束 -->
        </div>
        <!--<div :style="{ width: '32.3%', height: mainHeightItem + 'px' }" style="display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end; overflow: auto;" class="invisible-scrollbar">
          <div :style="{ height: (54 / 96) + 'rem', marginTop: (19 / 96) + 'rem', marginBottom: (19 / 96) + 'rem' }" style="width: 88.4%; display: flex; flex-direction: row; justify-content: flex-end; align-items: center;">
            <div :style="{ width: (77 / 96) + 'rem' }" style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
              <span :style="{ fontSize: (30 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }" style="font-family: SimHei; font-weight: 400; color: rgba(238, 238, 238, 0.8);">P</span>
            </div>
            <div :style="{ width: (77 / 96) + 'rem' }" style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
              <span :style="{ fontSize: (30 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }" style="font-family: SimHei; font-weight: 400; color: rgba(238, 238, 238, 0.8);">F</span>
            </div>
            <div :style="{ width: '57.9%' }" style="display: flex; flex-direction: row; justify-content: center; align-items: center;"></div>
            <div :style="{ width: (77 / 96) + 'rem' }" style="display: flex; flex-direction: row; justify-content: center; align-items: center;"></div>
          </div>
          <div v-for="(item, index) in awayTeamLists" :key="index" style="width: 88.4%; display: flex; flex-direction: row; justify-content: flex-end; align-items: center;" :style="{ height: (54 / 96) + 'rem', borderTopRightRadius: (54 / 96) + 'rem', borderBottomRightRadius: (54 / 96) + 'rem', background: index <= 4 ? 'linear-gradient(-88deg, #344474 0%, #191B3A 48%, #0B142B 100%)' : ''}">
            <div style="width: 100%; display: flex; flex-direction: row; justify-content: flex-end; align-items: center;" :style="{ height: (50 / 96) + 'rem', borderTopRightRadius: (54 / 96) + 'rem', borderBottomRightRadius: (54 / 96) + 'rem', background: index <= 4 ? '#121327' : ''}">
              <div :style="{ width: (77 / 96) + 'rem' }" style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                <span :style="{ fontSize: (38 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }" style="font-family: SimHei; font-weight: 400; color: rgba(238, 238, 238, 0.8);">{{ item.pNum }}</span>
              </div>
              <div :style="{ width: (77 / 96) + 'rem' }" style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                <span :style="{ fontSize: (38 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }" style="font-family: SimHei; font-weight: 400; color: rgba(238, 238, 238, 0.8);">{{ item.fNum }}</span>
              </div>
              <div :style="{ width: '57.9%' }" style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                <span :style="{ fontSize: (38 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }" style="font-family: SimHei; font-weight: 400; color: rgba(238, 238, 238, 0.8);">{{ item.playerName }}</span>
              </div>
              <div :style="{ width: (77 / 96) + 'rem' }" style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                <span :style="{ fontSize: (38 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }" style="font-family: SimHei; font-weight: 400; color: rgba(238, 238, 238, 0.8);">{{ item.playerNum }}</span>
              </div>
            </div>
          </div>
        </div>-->
        <div :style="{ width: '32.3%', height: mainHeight + 'px' }" style="display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end; overflow: hidden;" class="invisible-scrollbar">
          <div :style="{ height: (54 / 96) + 'rem', marginTop: (19 / 96) + 'rem', marginBottom: (19 / 96) + 'rem' }" style="width: 88.4%; display: flex; flex-direction: row; justify-content: flex-end; align-items: center;">
            <div :style="{ width: (77 / 96) + 'rem' }" style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
              <span :style="{ fontSize: (30 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }" style="font-family: SimHei; font-weight: 400; color: #ababab;">号码</span>
            </div>
            <div :style="{ width: '57.9%' }" style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
              <span :style="{ fontSize: (30 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }" style="font-family: SimHei; font-weight: 400; color: #ababab;">姓名</span>
            </div>
            <div :style="{ width: (77 / 96) + 'rem' }" style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
              <span :style="{ fontSize: (30 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }" style="font-family: SimHei; font-weight: 400; color: #ababab;">犯规</span>
            </div>
            <div :style="{ width: (77 / 96) + 'rem' }" style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
              <span :style="{ fontSize: (30 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }" style="font-family: SimHei; font-weight: 400; color: #ababab;">得分</span>
            </div>
          </div>
          <div v-if="awayTeamElementHeight > mainHeightItem" style="width: 88.4%;">
            <vue-seamless-scroll :data="awayTeamLists" class="seamless-warp" :class-option="classRightOption" :style="{ height: mainHeightItem + 'px' }">
              <div ref="awayTeamElement" style="width: 100%;">
                <div v-for="(item, index) in awayTeamLists" :key="index" style="width: 100%; display: flex; flex-direction: row; justify-content: flex-end; align-items: center;" :style="{ height: (54 / 96) + 'rem', borderTopRightRadius: (54 / 96) + 'rem', borderBottomRightRadius: (54 / 96) + 'rem', background: index <= 4 ? 'linear-gradient(-88deg, #344474 0%, #191B3A 48%, #0B142B 100%)' : ''}">
                  <div style="width: 100%; display: flex; flex-direction: row; justify-content: flex-end; align-items: center;" :style="{ height: (50 / 96) + 'rem', borderTopRightRadius: (50 / 96) + 'rem', borderBottomRightRadius: (50 / 96) + 'rem', background: index <= 4 ? '#121327' : ''}">
                    <div :style="{ width: (77 / 96) + 'rem' }" style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                      <span :style="{ fontSize: (38 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }" style="font-family: SimHei; font-weight: 400; color: rgba(238, 238, 238, 0.8);">{{ item.playerNum }}</span>
                    </div>
                    <div :style="{ width: '57.9%' }" style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                      <span :style="{ fontSize: (36 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }" style="font-family: SimHei; font-weight: 400; color: rgba(238, 238, 238, 0.8);">{{ item.playerName }}</span>
                    </div>
                    <div :style="{ width: (77 / 96) + 'rem' }" style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                      <span :style="{ fontSize: (38 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }" style="font-family: SimHei; font-weight: 400; color: rgba(238, 238, 238, 0.8);">{{ item.fNum }}</span>
                    </div>
                    <div :style="{ width: (77 / 96) + 'rem' }" style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                      <span :style="{ fontSize: (38 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }" style="font-family: SimHei; font-weight: 400; color: rgba(238, 238, 238, 0.8);">{{ item.pNum }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </vue-seamless-scroll>
          </div>
          <div v-if="awayTeamElementHeight <= mainHeightItem" style="width: 88.4%;">
            <div ref="awayTeamElement" style="width: 100%;">
              <div v-for="(item, index) in awayTeamLists" :key="index" style="width: 100%; display: flex; flex-direction: row; justify-content: flex-end; align-items: center;" :style="{ height: (54 / 96) + 'rem', borderTopRightRadius: (54 / 96) + 'rem', borderBottomRightRadius: (54 / 96) + 'rem', background: index <= 4 ? 'linear-gradient(-88deg, #344474 0%, #191B3A 48%, #0B142B 100%)' : ''}">
                <div style="width: 100%; display: flex; flex-direction: row; justify-content: flex-end; align-items: center;" :style="{ height: (50 / 96) + 'rem', borderTopRightRadius: (50 / 96) + 'rem', borderBottomRightRadius: (50 / 96) + 'rem', background: index <= 4 ? '#121327' : ''}">
                  <div :style="{ width: (77 / 96) + 'rem' }" style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                    <span :style="{ fontSize: (38 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }" style="font-family: SimHei; font-weight: 400; color: rgba(238, 238, 238, 0.8);">{{ item.playerNum }}</span>
                  </div>
                  <div :style="{ width: '57.9%' }" style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                    <span :style="{ fontSize: (36 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }" style="font-family: SimHei; font-weight: 400; color: rgba(238, 238, 238, 0.8);">{{ item.playerName }}</span>
                  </div>
                  <div :style="{ width: (77 / 96) + 'rem' }" style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                    <span :style="{ fontSize: (38 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }" style="font-family: SimHei; font-weight: 400; color: rgba(238, 238, 238, 0.8);">{{ item.fNum }}</span>
                  </div>
                  <div :style="{ width: (77 / 96) + 'rem' }" style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
                    <span :style="{ fontSize: (38 / 96) + 'rem', lineHeight: (30 / 96) + 'rem' }" style="font-family: SimHei; font-weight: 400; color: rgba(238, 238, 238, 0.8);">{{ item.pNum }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 主体结束 -->
      <!-- 页脚logo开始 -->
      <div style="width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; position: fixed;" :style="{ bottom: (20 / 96) + 'rem' }" ref="footElement">
        <div :style="{ width: (192 / 96) + 'rem', height: (87 / 96) + 'rem' }" style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
          <img style="width: 100%; height: 100%;" src="../../../static/logos.png" />
        </div>
      </div>
      <!-- 页脚logo结束 -->
    </div>
  </div>
</template>

<script>
  import vueSeamlessScroll from 'vue-seamless-scroll'
  import  {pageResize} from '../../utils/resetScreenSize.js'
  export default {
    name: 'Home',
    components: {
      vueSeamlessScroll
    },
    data () {
      return {
        countDown: true,
        matchTitle: "",
        homeTeamName: "",
        awayTeamName: "",
        homeTeamImg: "",
        awayTeamImg: "",
        sectionsNum: "",
        minute: "06",
        second: "22",
        millisecond: "55",
        homeTeamScorce: 0,
        awayTeamScorce: 0,
        homeTeamSuspendNum: 2,
        awayTeamSuspendNum: 3,
        homeTeamfoulNum: 2,
        awayTeamfoulNum: 3,
        i: 0,
        homeTeamLists: [],
        awayTeamLists: [],
        mainHeight: 0,
        mainHeightItem: 0,
        backsShows: false,
        homeTeamElementHeight: 0,
        awayTeamElementHeight: 0,
        timer: null
      }
    },
    computed: {
      classRightOption() {
        return {
          step: 0.2, // 数值越大速度滚动越快
          limitMoveNum: this.awayTeamLists.length, // 开始无缝滚动的数据量 this.dataList.length
          hoverStop: true, // 是否开启鼠标悬停stop
          direction: 1, // 0向下 1向上 2向左 3向右
          openWatch: true, // 开启数据实时监控刷新dom
          singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
          waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
        }
      },
      classLeftOption() {
        return {
          step: 0.2, // 数值越大速度滚动越快
          limitMoveNum: this.homeTeamLists.length, // 开始无缝滚动的数据量 this.dataList.length
          hoverStop: true, // 是否开启鼠标悬停stop
          direction: 1, // 0向下 1向上 2向左 3向右
          openWatch: true, // 开启数据实时监控刷新dom
          singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
          waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
        }
      }
    },
    mounted() {
      pageResize();
      // setInterval(this.myFunction, 1000 * 5);
    },
    methods: {
      myFunction() {
        this.i = this.i + 1;
        // console.log("轮训任务=================>" + this.i);
        //这里写自己的ajax请求访问后台就可以了
      },
      selectMatchVo(id) {
        let jsons = {
          id: id
        };
        this.$http.post('/competition/selectCompetitionData', jsons).then((res) => {
          if(res.code == 200) {
            let homeTeamLists = [];
            let awayTeamLists = [];
            // console.log("res: ", res);
            this.homeTeamName = res.data.homeTeamName;
            this.awayTeamName = res.data.awayTeamName;
            this.matchTitle = res.data.leagueInfo.leagueName;
            this.homeTeamImg = res.data.homeTeamStatistics.teamInfo.teamLogo ? res.data.homeTeamStatistics.teamInfo.teamLogo : "../../static/league_match_logo.png";
            this.awayTeamImg = res.data.awayTeamStatistics.teamInfo.teamLogo ? res.data.awayTeamStatistics.teamInfo.teamLogo : "../../static/league_match_logo.png";
            this.homeTeamScorce = res.data.homeTeamScore;
            this.awayTeamScorce = res.data.awayTeamScore;
            if(res.data.quarter == 1) {
              this.sectionsNum = "第一节";
            }
            if(res.data.quarter == 2) {
              this.sectionsNum = "第二节";
            }
            if(res.data.quarter == 3) {
              this.sectionsNum = "第三节";
            }
            if(res.data.quarter == 4) {
              this.sectionsNum = "第四节";
            }
            if(res.data.quarter >= 5) {
              this.sectionsNum = "加时赛";
            }
            for(let i=0;i<res.data.homeTeamPlayerStatistics.length;i++) {
              // if(res.data.homeTeamPlayerStatistics[i].playerInfo) {
                homeTeamLists.push({
                  face: res.data.homeTeamPlayerStatistics[i].playerInfo ? res.data.homeTeamPlayerStatistics[i].playerInfo.face : "",
                  playerNum: res.data.homeTeamPlayerStatistics[i].playerInfo ? res.data.homeTeamPlayerStatistics[i].playerInfo.number : "",
                  playerName: res.data.homeTeamPlayerStatistics[i].playerInfo ? res.data.homeTeamPlayerStatistics[i].playerInfo.name : "其他",
                  fNum: res.data.homeTeamPlayerStatistics[i].fouls,
                  pNum: res.data.homeTeamPlayerStatistics[i].pts,
                  asts: res.data.homeTeamPlayerStatistics[i].asts,
                  blks: res.data.homeTeamPlayerStatistics[i].blks,
                  competitionId: res.data.homeTeamPlayerStatistics[i].competitionId,
                  def: res.data.homeTeamPlayerStatistics[i].def,
                  disqualifyingFoul: res.data.homeTeamPlayerStatistics[i].disqualifyingFoul,
                  eff: res.data.homeTeamPlayerStatistics[i].eff,
                  fouls: res.data.homeTeamPlayerStatistics[i].fouls,
                  fts: res.data.homeTeamPlayerStatistics[i].fts,
                  ftsMiss:res.data.homeTeamPlayerStatistics[i]. ftsMiss,
                  id: res.data.homeTeamPlayerStatistics[i].id,
                  isAppearance: res.data.homeTeamPlayerStatistics[i].isAppearance,
                  isFirst: res.data.homeTeamPlayerStatistics[i].isFirst,
                  isHome: res.data.homeTeamPlayerStatistics[i].isHome,
                  isPlay: res.data.homeTeamPlayerStatistics[i].isPlay,
                  isPresent: res.data.homeTeamPlayerStatistics[i].isPresent,
                  off: res.data.homeTeamPlayerStatistics[i].off,
                  offensiveFoul: res.data.homeTeamPlayerStatistics[i].offensiveFoul,
                  onePs: res.data.homeTeamPlayerStatistics[i].onePs,
                  onePsMiss: res.data.homeTeamPlayerStatistics[i].onePsMiss,
                  ordinaryFoul: res.data.homeTeamPlayerStatistics[i].ordinaryFoul,
                  playTime: res.data.homeTeamPlayerStatistics[i].playTime,
                  playerId: res.data.homeTeamPlayerStatistics[i].playerInfo ? res.data.homeTeamPlayerStatistics[i].playerInfo.playerId : "",
                  number: res.data.homeTeamPlayerStatistics[i].playerInfo ? res.data.homeTeamPlayerStatistics[i].playerInfo.number : "",
                  name: res.data.homeTeamPlayerStatistics[i].playerInfo ? res.data.homeTeamPlayerStatistics[i].playerInfo.name : "其他",
                  pts: res.data.homeTeamPlayerStatistics[i].pts,
                  rebs: res.data.homeTeamPlayerStatistics[i].rebs,
                  stls: res.data.homeTeamPlayerStatistics[i].stls,
                  technicalFoul: res.data.homeTeamPlayerStatistics[i].technicalFoul,
                  threePs: res.data.homeTeamPlayerStatistics[i].threePs,
                  threePsMiss: res.data.homeTeamPlayerStatistics[i].threePsMiss,
                  tos: res.data.homeTeamPlayerStatistics[i].tos,
                  twoPs: res.data.homeTeamPlayerStatistics[i].twoPs,
                  twoPsMiss: res.data.homeTeamPlayerStatistics[i].twoPsMiss,
                  unsportsmanlikeFoul: res.data.homeTeamPlayerStatistics[i].unsportsmanlikeFoul
                });
              // }
            }
            this.homeTeamLists = homeTeamLists;
            for(let i=0;i<res.data.awayTeamPlayerStatistics.length;i++) {
              // if(res.data.awayTeamPlayerStatistics[i].playerInfo) {
                awayTeamLists.push({
                  face: res.data.awayTeamPlayerStatistics[i].playerInfo ? res.data.awayTeamPlayerStatistics[i].playerInfo.face : "",
                  playerNum: res.data.awayTeamPlayerStatistics[i].playerInfo ? res.data.awayTeamPlayerStatistics[i].playerInfo.number : "",
                  playerName: res.data.awayTeamPlayerStatistics[i].playerInfo ? res.data.awayTeamPlayerStatistics[i].playerInfo.name : "其他",
                  fNum: res.data.awayTeamPlayerStatistics[i].fouls,
                  pNum: res.data.awayTeamPlayerStatistics[i].pts,
                  asts: res.data.awayTeamPlayerStatistics[i].asts,
                  blks: res.data.awayTeamPlayerStatistics[i].blks,
                  competitionId: res.data.awayTeamPlayerStatistics[i].competitionId,
                  def: res.data.awayTeamPlayerStatistics[i].def,
                  disqualifyingFoul: res.data.awayTeamPlayerStatistics[i].disqualifyingFoul,
                  eff: res.data.awayTeamPlayerStatistics[i].eff,
                  fouls: res.data.awayTeamPlayerStatistics[i].fouls,
                  fts: res.data.awayTeamPlayerStatistics[i].fts,
                  ftsMiss:res.data.awayTeamPlayerStatistics[i]. ftsMiss,
                  id: res.data.awayTeamPlayerStatistics[i].id,
                  isAppearance: res.data.awayTeamPlayerStatistics[i].isAppearance,
                  isFirst: res.data.awayTeamPlayerStatistics[i].isFirst,
                  isHome: res.data.awayTeamPlayerStatistics[i].isHome,
                  isPlay: res.data.awayTeamPlayerStatistics[i].isPlay,
                  isPresent: res.data.awayTeamPlayerStatistics[i].isPresent,
                  off: res.data.awayTeamPlayerStatistics[i].off,
                  offensiveFoul: res.data.awayTeamPlayerStatistics[i].offensiveFoul,
                  onePs: res.data.awayTeamPlayerStatistics[i].onePs,
                  onePsMiss: res.data.awayTeamPlayerStatistics[i].onePsMiss,
                  ordinaryFoul: res.data.awayTeamPlayerStatistics[i].ordinaryFoul,
                  playTime: res.data.awayTeamPlayerStatistics[i].playTime,
                  playerId: res.data.awayTeamPlayerStatistics[i].playerInfo ? res.data.awayTeamPlayerStatistics[i].playerInfo.playerId : "",
                  number: res.data.awayTeamPlayerStatistics[i].playerInfo ? res.data.awayTeamPlayerStatistics[i].playerInfo.number : "",
                  name: res.data.awayTeamPlayerStatistics[i].playerInfo ? res.data.awayTeamPlayerStatistics[i].playerInfo.name : "其他",
                  pts: res.data.awayTeamPlayerStatistics[i].pts,
                  rebs: res.data.awayTeamPlayerStatistics[i].rebs,
                  stls: res.data.awayTeamPlayerStatistics[i].stls,
                  technicalFoul: res.data.awayTeamPlayerStatistics[i].technicalFoul,
                  threePs: res.data.awayTeamPlayerStatistics[i].threePs,
                  threePsMiss: res.data.awayTeamPlayerStatistics[i].threePsMiss,
                  tos: res.data.awayTeamPlayerStatistics[i].tos,
                  twoPs: res.data.awayTeamPlayerStatistics[i].twoPs,
                  twoPsMiss: res.data.awayTeamPlayerStatistics[i].twoPsMiss,
                  unsportsmanlikeFoul: res.data.awayTeamPlayerStatistics[i].unsportsmanlikeFoul
                });
              // }
            }
            this.awayTeamLists = awayTeamLists;
            this.$nextTick(() => {
              this.mainHeight = document.documentElement.clientHeight - this.$refs.matchTitleElement.offsetHeight - this.$refs.teamElement.offsetHeight;
              this.mainHeightItem = document.documentElement.clientHeight - this.$refs.matchTitleElement.offsetHeight - this.$refs.teamElement.offsetHeight - this.$refs.titleElement.offsetHeight;
              this.homeTeamElementHeight = this.$refs.homeTeamElement.offsetHeight;
              this.awayTeamElementHeight = this.$refs.awayTeamElement.offsetHeight;
            });
          } else {
            this.$toast(res.msg);
          }
        }).catch(e => {
          // console.log("e: ", e);
        });
      },
      getMatchList() {
        console.log("getMatchList");
      },
      leaveClick() {
        this.backsShows = false;
      },
      enterClick() {
        this.backsShows = true;
      },
      goBackClick() {
        this.$router.back();
      },
      toMatchInfosClick() {
        this.$router.push({
          name: "MatchInfos", query: {}
        });
      }
    },
    activated () {
      this.homeTeamLists = [];
      this.awayTeamLists = [];
      window.document.title = '大屏比分';
      let matchId = localStorage.getItem("matchId");
      this.selectMatchVo(matchId);
      this.backsShows = false;
      this.timer = setInterval(() => {
        this.selectMatchVo(matchId);
      }, 1000);
    },
    deactivated() {
      clearInterval(this.timer);
      this.mainHeight = 0;
      this.mainHeightItem = 0;
      this.homeTeamElementHeight = 0;
      this.awayTeamElementHeight = 0;
    }
  }
</script>

<style scoped>
  .home-index {

  }
  .match-title-main {
    width: 86%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .match-title {
    font-family: SimHei;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.95);
  }
  .invisible-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .seamless-warp{
    width: 100%;
    overflow: hidden;
  }
</style>
